<template>
  <div class="view-date-picker">
    <fx-card title="基础用法">
      <fx-date-picker v-model="date"></fx-date-picker>
      <template #hide>
        <pre v-highlight="baseCode"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="月/年">
      <fx-row class="mb10">
        <fx-col>
          月:
          <fx-date-picker v-model="month" type="month"></fx-date-picker>
        </fx-col>
      </fx-row>
      <fx-row>
        <fx-col>
          年:
          <fx-date-picker v-model="year" type="year"></fx-date-picker>
        </fx-col>
      </fx-row>
      <template #hide>
        <pre v-highlight="typeCode"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="API 属性">
      <fx-table :data="datePickerApi">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="type" label="类型"></fx-table-item>
        <fx-table-item prop="value" label="可选值"></fx-table-item>
        <fx-table-item prop="default" label="默认"></fx-table-item>
      </fx-table>
    </fx-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const datePickerApi = [
  { name: 'modelValue / v-model', directions: '绑定值', type: 'String' },
  { name: 'dateType', directions: '时间类型', type: 'String', value: 'day | week | month | year', default: 'day' }
]

const date = ref('1992-08-22')
const month = ref(new Date())
const year = ref('1996')

const baseCode = `<fx-date-picker v-model="date"></fx-date-picker>
export default defineComponent({
  setup () {
    const date = ref('2020-08-09')
  }
})`

const typeCode = `<fx-row class="mb10">
  <fx-col>
    月:
    <fx-date-picker v-model="month" type="month"></fx-date-picker>
  </fx-col>
</fx-row>
<fx-row>
  <fx-col>
    年:
    <fx-date-picker v-model="year" type="year"></fx-date-picker>
  </fx-col>
</fx-row>
export default defineComponent({
  setup () {
    const month = ref(new Date())
    const year = ref('1996')
  }
})`
</script>

<style scoped lang="scss">
.view-date-picker {
}
</style>
